<template>
    <div class="box">
        <aside>
            <MenuList :menuList="menuList"/>
        </aside>
        
        <main class="body">
            <slot/>
        </main>
    </div>
</template>

<script>
    import MenuList from './MenuList.vue'
    export default {
        // 注册组件
        components: {MenuList},
        data() {
            return {
                // menuList: [],
                page: 1,
                size: 3,
                total: 0,
                name: '',
                state: '',
                tableData: [],
                loading: true,
            }
        },
        computed:{
            menuList(){
                let _menu = this.$store.getters['common/menuList']

                function loop(_list, _id = null) {
                    // 父亲节点
                    let _nodes = _list.filter(_it => {
                        if(_it.parent_id === ''){
                            _it.parent_id = null
                        }
                        return _it.parent_id === _id

                    })
                    // 查找子节点
                    return _nodes.map(_item => {
                        let _idx = _list.findIndex(_it => _it.parent_id === _item.id)
                        if (_idx > -1) {
                            _item.children = loop(_list, _item.id)
                        } else {
                            _item.children = []
                        }
                        return _item
                    })
                }
                let _list = loop(_menu)
                return _list
            }
        },
        created() {
            // let _menu = this.$store.getters['common/menuList']

            // function loop(_list, _id = null) {
            //     // 父亲节点
            //     let _nodes = _list.filter(_it => {
            //         if(_it.parent_id === ''){
            //             _it.parent_id = null
            //         }
            //         return _it.parent_id === _id

            //     })
            //     // 查找子节点
            //     return _nodes.map(_item => {
            //         let _idx = _list.findIndex(_it => _it.parent_id === _item.id)
            //         if (_idx > -1) {
            //             _item.children = loop(_list, _item.id)
            //         } else {
            //             _item.children = []
            //         }
            //         return _item
            //     })
            // }
            // let _list = loop(_menu)
            // this.menuList = _list
        },
        methods: {

        },
    }
</script>

<style lang="less" scoped>
    .box {
        display: flex;
        height: 100%;
        > aside {
            
            overflow-x: hidden;
            .el-menu{
                height: calc(100% - 16px);
                padding-top: 16px;
                min-width: 230px;
                border-right: 0px;
            }
        }
        > main {
            flex: 1;
            width: 0;
            background-color: #eeeeee;
        }
    }

    
</style>